<template>
  <el-upload ref="uploadRef" action="" :auto-upload="false" :class="{ hide: imgUrl }" list-type="picture-card" :on-remove="handleRemove" :on-preview="handlePictureCardPreview" :on-change="handleChange" :file-list="imgUrl ? [{ url: imgUrl }] : []">
    <!-- <el-icon><Plus /></el-icon> -->
    <div class="upload_box">
      <img class="upload_pic" src="@renderer/assets/imgs/common/cross_icon.png" alt="" />
      <div>点击上传</div>
    </div>
  </el-upload>
  <el-dialog v-model="dialogVisible" destroy-on-close>
    <img w-full :src="dialogImgUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { ElMessage, FormInstance, UploadProps } from 'element-plus'
  import { doUploadFile } from '@renderer/ajax/api/common'

  interface Props {
    imgUrl?: string
    imgSize?: string | number
    sizeType?: string
  }
  const props = withDefaults(defineProps<Props>(), {
    imgUrl: '',
    sizeType: 'M'
  })
  const emit = defineEmits(['submit'])
  const uploadRef: any = ref(null)
  const dialogImgUrl = ref('')
  const dialogVisible = ref(false)
  const handleRemove: UploadProps['onRemove'] = (v: any) => {
    emit('submit', '')
  }
  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: any) => {
    dialogImgUrl.value = uploadFile.url!
    dialogVisible.value = true
  }
  const handleChange: UploadProps['onChange'] = async (file: any) => {
    const fielType: any = file.name.split('.')
    if ('jpg|JPG|jpeg|JPEG|png|PNG'.includes(fielType[fielType.length - 1])) {
      // 校验文件大小
      const file_size = Number(props.imgSize)
      if (file_size) {
        const _file = file.raw
        const kbisLt = _file.size / 1024 < file_size
        const misLt = _file.size / 1024 / 1024 < file_size
        if (props.sizeType === 'M') {
          if (!misLt) {
            ElMessage.error(`请上传${file_size}M以下的图片`)
            return uploadRef.value.clearFiles()
          }
        } else if (!kbisLt) {
          ElMessage.error(`请上传${file_size}kb以下的图片`)
          return uploadRef.value.clearFiles()
        }
      }
      try {
        const res: any = await doUploadFile({ file_name: file.name, file: file.raw })
        emit('submit', res.url, file.name) // 签名需要名称
      } catch (error) {
        uploadRef.value.clearFiles()
      }
    } else {
      ElMessage.error('上传文件类型不正确, 请重新上传!')
      uploadRef.value.clearFiles()
    }
  }
</script>

<style lang="scss" scoped>
  .hide :deep(.el-upload--picture-card) {
    display: none !important;
  }
  .hide {
    height: 110px;
  }
  :deep(.el-list-enter-active),
  :deep(.el-list-leave-active) {
    transition: none;
  }
  :deep(.el-list-enter),
  :deep(.el-list-leave-active) {
    opacity: 0;
  }
  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 110px;
    height: 110px;
  }
  :deep(.el-upload) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 110px;
    .upload_box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 5px;
      .upload_pic {
        width: 20px;
      }
    }
  }
</style>
